import styles from './index.less';
import { name, desc } from '../../../package.json';
import { CaretRightOutlined, GithubOutlined } from '@ant-design/icons';
import { demos } from './Data';
import { history } from 'umi';

export default () => {
    
    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <p className={styles.title}>{name}</p>
                <p className={styles.desc}>{desc}</p>
                <GithubOutlined onClick={() => window.open('https://gitee.com/alexandor/demos', '_blank')} />
            </div>
            <div className={styles.content}>
                {demos.map((i: Demo, index: number) => {
                    return (
                        <div key={`${i.name}-${index}`} className={styles.card}>
                            <div className={styles.titleLayout}>
                                <img className={styles.icon} src={i.icon} />
                                <p className={styles.name}>{i.name}</p>
                            </div>
                            
                            <p className={styles.row}>
                                <span className={styles.label}>官方网站：</span>
                                <a href={i.websiteLink} className={styles.value} target='_blank'>{i.websiteLink}</a>
                            </p>
                            <p className={styles.row}>
                                <span className={styles.label}>应用场景：</span>
                                <span className={styles.value}>{i.useCase}</span>
                            </p>
                            <p className={styles.row} style={{ alignItems: 'center', marginTop: 12 }}>
                                <span className={styles.label}>演示页面：</span>
                                {i.showcases.map((c, index) => {
                                    return (
                                        <span className={styles.route} key={`${index}`} onClick={() => {
                                            history.push(c.route);
                                        }}>{c.name}<CaretRightOutlined/></span>
                                    );
                                })}
                            </p>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}